<template>
    <div v-if= "show" ref= "videoBox" class= "background" >
        <video class= "videoBox" :src= "videoData.videoUrl" controls="controls"></video>
        <img @click= "closeVideo()" class= "exitButton" src= "../../assets/exitButton.png" alt="">
        <img class="logo" src="../../assets/camera.png" alt="">
    </div>
</template>

<script>
import bus from '../../eventBus'
export default {
    name:'surveillanceVideo',
    data(){
        return{
            //默认长宽
            defaultWidth:702,
            defaultHeight:452,
            show:false,
            videoData:'',
        }
    },
    props:{
        video_data:{
            type:Object,
            default:null,
        },
    },
    created(){
       bus.$emit('getVideoData',(val)=>{
           this.videoData = val
       });
    },
    mounted(){
        this.show = true;
    },
    methods:{
        //初始化大小
        initSize(scale){
            this.$nextTick(()=>{
                this.$refs.videoBox.style = 'width: '+scale*this.defaultWidth+'px;height: '+scale*this.defaultHeight+'px;'
            })
        },
        closeVideo(){
           this.show = false;
           bus.$emit('closeVideo',this.videoData.videoId);
        },
        initVideo(url){
            this.videoUrl = url;
            this.show = true;
        }
    }
}
</script>

<style scoped>
    .background{
        display: flex;
        position: relative;
        width: 702px;
        height: 452px;
        background-image: url('../../assets/toolBackground.png');
        background-size: 100% 100%;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .videoBox{
        width: 95%;
        height: 95%;     
    }

    .exitButton{
        width: 3.4%;
        height: 4.8%;
        position: absolute;
        right: 4.4%;
        top: 7.5%;  
        z-index: 2;
        cursor: pointer; 
    }

    .logo{
        position: absolute;
        left: 4.2%;
        top: 6.6%;  
        width: 7.5%;
        height: 10.8%;
    }
</style>